<template>
	<view style="display: flex; width: 100vw; max-width: 100vw;">
		<view style="height: 86vh; overflow: auto;">
			
		
		<view class="zjc-rb">
			<uni-swiper-dot :info="strategy.detailImgs" :current="current" field="content" mode="default">
				<swiper class="swiper-box" @change="change" autoplay="true" interval="3000">
					<swiper-item v-for="(item, index) in strategy.detailImgs" :key="index"
						style="width:100%; margin:  0 auto;">
						<image style="width: 750rpx; height: 500rpx;" :src="item" alt="" mode="aspectFill">
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>

		<view style="margin-top: 24rpx; margin-left: 24rpx; font-size: 40rpx; font-weight: 700;">
			<text>{{ strategy.stTitle }}</text>
		</view>

		<view v-html="strategy.context" style="width: 90%; margin-top: 24rpx; margin-left: 24rpx;">

		</view>
		<!-- <view>
			<text style=" margin-left: 20rpx; font-size: 25rpx;color: gray;">共有{{comments.length-1}}条评论</text>
		</view> -->
		<view class="st-comment-content" style="width: 100%; margin-left: 24rpx;">
			<view class="flex-col page">
				<text class="self-center text">评论</text>
				<view class="flex-col self-stretch section mt-15">
					<text class="self-start font text_2">全部评论({{ comments.length }})</text>
					<view class="flex-col self-stretch group mt-23-5" v-for="item in comments">
						<view v-if="item.parentId === '0'">
							<view class="flex-row justify-between items-center self-stretch">
								<view class="flex-row items-center" style="display: flex;">
									<image class="shrink-0 image" :src="item.txImage" />
									<view>
										<text class="ml-8 text_3"
											style="padding-bottom: 200rpx; margin-left: 20rpx;">{{ item.userName }}</text>
									</view>
									
								</view>
								<view class=" group_2" style="padding-right: 20rpx;">

								</view>

								<text class="self-start font_2 text_5"
									style="word-wrap: break-word;">{{ item.content }}</text>
									
								<view class="flex-row justify-between self-stretch group_3">
									<view class="group_4">

										<text class="font_3 text_6">{{ item.commentTime }}</text>
										<text class="font_3 text_9">·</text>
										<text class="font_3 text_7"
											@click="back(item.commentId, strategy.stId, 1)">回复TA</text>
									</view>

								</view>
							</view>




							<uni-collapse-item title="查看回复" style="margin-top: 20rpx;">
								<view class="content">
									<view class="flex-row self-end section_2" style="background-color: #ffffff;"
										v-for="(item1, index) in comments" v-if="item.commentId === item1.parentId">

										<text class="font text_10">{{ item1.userName }}:</text>
										<text class="ml-4 font_2 text_11"
											style="height: fit-content;text-align: justify;flex: 0 0 120rpx;word-wrap: break-word; ">{{ item1.content }}</text>


									</view>
								</view>
							</uni-collapse-item>
						</view>
					</view>
				</view>
			</view>

		</view>
</view>
		<view class="footer">
			<view class="card-actions-item" @click="actionsClick('收藏')">
				<uni-icons v-if="!isSc" type="star" size="18" color="#999"></uni-icons>
				<uni-icons v-if="isSc" type="star-filled" size="18" color="red"></uni-icons>
				<p style="font-size: 25rpx; color: gray;">{{ strategy.stSc }}</p>
			</view>
			<view class="card-actions-item" @click="actionsClick('点赞')">
				<uni-icons v-if="!isLike" type="heart" size="18" color="#999"></uni-icons>
				<uni-icons v-if="isLike" type="heart-filled" size="18" color="red"></uni-icons>
				<p style="font-size: 25rpx; color: gray;">{{ strategy.stZan }}</p>
			</view>
			<view class="card-actions-item" @click="actionsClick('评论')">
				<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
				<p style="font-size: 25rpx; color: gray;">{{ comments.length - 1 }}</p>
			</view>
			<view style="width: 50%;height: 70%; background-color: #f1f1f1;margin-top:10rpx;border-radius: 10rpx;"
				@click="toComment(strategy.stId, 1)">
				<text style="margin-left: 20rpx; font-size: 25rpx;color: gray;">评论</text>
			</view>
			<uni-popup ref="popup" type="bottom" background-color="#fff">

				<view style="width:100%; height: 200rpx; display: flex; justify-content: space-between;">
					<uni-easyinput type="textarea" v-model="newComment" placeholder="评论"
						style="margin-top: 10rpx; margin-bottom: 10rpx; margin-left: 10rpx;" />
					<view style="width: 100rpx;height: 60rpx; border-radius: 10rpx; background-color: #12b7f5; 
					 margin-top:50rpx; margin-left: 10rpx; margin-right: 10rpx; text-align: center; line-height: 60rpx;"
						@click="addComment()">
						确认
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</view></template>

<script>
export default {
	data() {
		return {
			current: 1,
			isSc: false,
			isLike: false,
			isComment: false,
			newComment: null,
			isUpdateSc: false,
			moreComment: false,
			parentId: 0,
			strategy: {

			},
			comments: [

			]
		}
	},
	onUnload() {
		if (this.isUpdateSc) {
			this.request({
				url: '/user-sc/updateSc',
				method: 'GET',
				data: {
					stId: this.strategy.stId,
					status: this.isSc
				}
			}).then(res => {

			})
		}
	},
	onLoad(options) {
		this.strategy.stId = options.stid
		//获取内容
		//获取评论
		//获取点赞数
		//获取收藏数
		this.init(options.stid)
		this.initComment(options.stid)

	},
	methods: {
		add() {
			if (this.content.length > 35) {
				this.content = '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。'
			} else {
				this.content = '折叠内容主体，这是一段比较长内容。通过点击按钮修改后内容后，使组件高度发生变化，在次点击按钮恢复之前的内容和高度。'
			}
			// TODO 小程序中不支持自动更新 ，需要手动resize 更新组件高度
			// #ifdef MP
			this.$nextTick(() => {
				this.$refs.collapse.resize()
			})
			// #endif
		},
		onClick(e) {
			uni.showToast({
				title: '列表被点击'
			})
		},
		onChange(e) {
			console.log(e);
		},
		Zan(id) {
			this.request({
				url: "/comment/zan",
				method: "PUT",
				data: id

			}).then(res => {
				if (res.code === '1') {
					console.log("成功")
					for (var a = 0; a < this.comments.length; a++) {
						if (this.comments[a].commentId === id) {
							this.comments[a].commentZan++
						}
					}

				}
				else {
					console.log("失败")
				}

			}).catch(err => {
				console.log("系统错误")
			})


		},

		back(commentId, a, b) {
			this.parentId = commentId
			this.toComment(a, b)

		},

		async init(id) {
			await this.request({
				url: "/strategy/detail",
				method: "GET",
				data: {
					stId: id
				}
			}).then(res => {

				if (res.code === '1') {
					this.strategy = res.data
				} else {
					uni.showToast({
						icon: "error",
						title: res.msg
					})
				}
			}).catch(() => {
				uni.showToast({
					icon: "error",
					title: "服务异常"
				})
			})

			await this.request({
				url: "/user-likes/getLike",
				method: "GET",
				data: {
					stId: this.strategy.stId
				}
			}).then(res => {
				if (res.code === '1') {
					console.log("是否点赞", res.data)
					if (res.data == "false") {
						this.isLike = false
					} else {
						this.isLike = true
					}

				}

			})



			await this.request({
				url: "/user-sc/getSc",
				method: "GET",
				data: {
					stId: id
				}
			}).then(res => {

				if (res.code === '1') {
					if (res.data == "false") {
						this.isSc = false
					} else {
						this.isSc = true
					}
				} else {
					uni.showToast({
						icon: "error",
						title: res.msg
					})
				}
			}).catch(() => {
				uni.showToast({
					icon: "error",
					title: "服务异常"
				})
			})


		},
		initComment(id) {
			this.request({
				url: "/comment/list",
				method: "GET",
				data: {
					stId: id
				}
			}).then(res => {

				if (res.code === '1') {
					this.comments = res.data
					console.log(this.comments)
				} else {
					uni.showToast({
						icon: "error",
						title: res.msg
					})
				}
			}).catch(() => {
				uni.showToast({
					icon: "error",
					title: "服务异常"
				})
			})
		},
		change(e) {
			this.current = e.detail.current
		},
		actionsClick(ename) {
			if (ename === '收藏') {
				this.isSc = !this.isSc
				//记录收藏是否改变，如果改变，在用户退出页面时，去请求ajax更新数据
				this.isUpdateSc = !this.isUpdateSc

				if (this.isSc) {
					this.strategy.stSc++
				}
				else {
					this.strategy.stSc--
				}

			}
			if (ename === '点赞') {
				this.isLike = !this.isLike
				//发送请求，告知更新点赞
				if (this.isLike) {
					this.strategy.stZan++

				}
				else {
					this.strategy.stZan--
				}

				this.request({
					url: '/user-likes/updateLike',
					method: "GET",
					data: {
						stId: this.strategy.stId,
						status: this.isLike
					}
				}).then(res => {

					console.log("更新点赞")
				})
			}
		},
		toComment(stId, userId) {
			this.$refs.popup.open('bottom')

			//添加一个新评论
		},
		addComment() {
			console.log(this.newComment)
			var temp = {
				commentId: null,
				stId: this.strategy.stId,
				txImage: '',
				userId: '',
				userName: '',
				commentTime: '',
				commentZan: '',
				parentId: '',
				content: null
			}
			if (this.newComment != '') {
				console.log(this.newComment)
				temp.content = this.newComment
				temp.parentId = this.parentId
				this.request({
					url: "/comment/add",
					method: "PUT",
					data: temp

				}).then(res => {
					if (res.code === '1') {
						console.log("成功")
						console.log(this.comments)
						this.initComment(this.strategy.stId)
						this.newComment = null
					}
					else {
						console.log("失败")
					}

				}).catch(err => {
					console.log("系统错误")
				})

			}

			this.$refs.popup.close()
			this.parentId = 0
		}

	}
}
</script>

<style scoped>
.mt-15 {
	margin-top: 30rpx;
}

.mt-23-5 {
	margin-top: 47rpx;
}

.ml-7 {
	margin-left: 14rpx;
}

.page {
	padding-top: 64rpx;
	background-color: #faf9f9;
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100%;
}

.text {
	color: #333333;
	font-size: 33rpx;
	font-family: MicrosoftYaHei-Bold;
	font-weight: 700;
	line-height: 30.4rpx;
}

.section {
	padding: 20rpx 24rpx 978rpx;
	background-color: #ffffff;
}

.font {
	font-size: 28rpx;
	font-family: MicrosoftYaHei-Bold;
	font-weight: 700;
	color: #333333;
}

.text_2 {
	line-height: 30.26rpx;
}

.group {
	padding-left: 10rpx;
	padding-right: 6rpx;
}

.image {
	width: 60rpx;
	height: 60rpx;
}

.text_3 {
	color: #333333;
	font-size: 26rpx;
	font-family: MicrosoftYaHei-Bold;
	font-weight: 700;
	line-height: 24.12rpx;
}

.group_2 {
	margin-right: 7rpx;
}

.text_4 {
	color: #999999;
	font-size: 26rpx;
	font-family: MicrosoftYaHei;
	line-height: 18.74rpx;
}

.image_2 {
	width: 30rpx;
	height: 29rpx;
}

.group_3 {
	margin-top: 34rpx;
	padding-left: 76rpx;
	padding-right: 3rpx;
}

.group_4 {
	line-height: 20.44rpx;
	height: 20.48rpx;
}

.font_3 {
	font-size: 22rpx;
	font-family: MicrosoftYaHei;
	line-height: 20.44rpx;
	color: #999999;
}

.text_8 {
	margin-left: 14rpx;
}

.text_6 {
	margin-left: 14rpx;
}

.text_9 {
	margin-left: 14rpx;
}

.text_7 {
	margin-left: 14rpx;
	color: #333333;
	line-height: 20.24rpx;
}

.image_3 {
	margin-top: 2rpx;
	width: 30rpx;
	height: 6rpx;
}

.section_2 {
	margin-top: 18rpx;
	padding: 38rpx 30rpx 26rpx;
	background-color: #f6f7f9;
	border-radius: 8rpx;
}

.text_10 {
	line-height: 25.44rpx;
}

.font_2 {
	font-size: 28rpx;
	font-family: MicrosoftYaHei;
	line-height: 25.84rpx;
	color: #333333;
}

.text_5 {
	margin-left: 76rpx;
	margin-top: 16rpx;
}

.text_11 {
	margin-right: 346rpx;
	line-height: 26.04rpx;
}

.zjc-rb {
	width: 100%;
	height: 500rpx;
	margin: 0 0;
}

.swiper-box {
	width: 100%;
	height: 500rpx;
}

.footer {
	position: fixed;
	width: 100%;
	border: #f1f1f1f1 solid 2rpx;
	bottom: 0rpx;
	height: 70rpx;
	display: flex;
	justify-content: space-around;

}

.example-body {
	flex-direction: column;
	flex: 1;
}

.content {
	padding: 15px;
}

.text {
	font-size: 14px;
	color: #666;
	line-height: 20px;
}

.button {
	// margin-top: 10px;
	margin: 10px;
	margin-bottom: 0;
}</style>
